<template>
	<div class="logoInfo">
		  <!-- 顶部logo集中展示区域 -->
		  <div class='logo_all'>
			  <!-- logo整体图片 -->
			  <transition  enter-active-class="animated bounceInLeft">
						<div class="logo_all_img" v-show="logo_all_show">
							<img src="../../../../static/logo/2233logo.jpg" width="80%" height='80%' >
						</div>
			  </transition>
			    
				 <transition  enter-active-class="animated bounceInRight">
						    <div class="logo_all_right" v-show="logo_all_right_p">
								<h1 >品牌优选</h1>
								<p >我们力荐优质品牌，只为每一个消费者带来更好的体验。</p><br>
								<p > <i class="iconfont icon-xiangxia1"></i></p>
							</div>
				 </transition>
				
		  </div>

		  <!-- adidas品牌部分 -->
		  <div class="adidas">
			        <h1 class="logo_text_h1">Adidas Originals</h1>
					<h2 class="logo_text_h2">品牌介绍</h2>
                    <p class="logo_text_p">adidas Originals是阿迪达斯旗下的运动经典系列，在全球各地有众多的追求者和拥有者。
					  
					    她以三叶草为标志，如同地球立体三维的平面展开，像一张世界地图， <img  src="../../../../static/logo/u=497158095,3911612559&fm=26&gp=0.jpg" width="150px" height="150px" class="logo_text_img addimg_left slide-in ">
						象征着三条纹延伸至全世界。adidas Originals是对阿迪达斯经典产品的传承。这一系列大量运用20世纪40年代到80年代的元素作为设计灵感，具有强烈的复古感。与此同时，adidas Originals更推崇原创精神，是一个面向所有人、鼓励原创、渴望为原创喝彩的街头时尚品牌，其永不泯灭的创意灵感将不断与更多的潮流人士激情分享。</p>
		  </div>

		  <!-- Vans品牌部分 -->
		  <div class="vans">
			     <h1 class="logo_text_h1">Vans</h1>
				 <h2 class="logo_text_h2">品牌介绍</h2>
				 <p class="logo_text_p">Vans（范斯）是1966年诞生于美国南加州的原创极限运动潮牌，致力于在发展原创性的同时支持全世界的板类和车类运动。Vans源于年轻，纯正和个性化风格，呈现出代表极限运动以及年轻文化核心的创造和自我表现力。<img  src="../../../../static/logo/vans-logo.png" width="250px" height="130px" class="vansLogo_img addimg_right slide-in "><br>
				  Vans (Vans) was born in 1966 in Southern California, the original extreme sports tide, dedicated to the development of originality while supporting the world's board and car sports. Vans comes from a young, pure and personalized style, showing creativity and self-expression that represents the core of extreme sports and young culture.</p>
		  </div>
		  <!-- Red Charcoal品牌部分 -->
		  <div class="Red_cha">
			   <h1 class="logo_text_h1">Red Charcoal</h1>
			   <h2 class="logo_text_h2">品牌介绍</h2>
			   <p class="logo_text_p">Red Charcoal红色木炭成立于2015年 ，是由国内插

 画设计师团队打造的美式街头时尚品牌 ，隶属于杭州倔强文化创意有限公司。<img src="../../../../static/logo/b2de9c82d158ccbfe5a695dc12d8bc3eb1354139.jpg" width="100px" height="100px" class="Red_logo addimg_left slide-in ">
 定位于18-28岁的时尚人群 ，结合“Let it burn”的品牌理念在产品开发上汲取了美式流行服饰中轻松随意的设计精髓  ，主营衬衣、外套、休闲裤及潮流配饰等品类</p>
		  </div>

		    <!-- Puma品牌部分 -->
		  <div class="puma">
			     <h1 class="logo_text_h1">Puma</h1>
				 <h2 class="logo_text_h2">品牌介绍</h2>
				 <p class="logo_text_p">品牌故事从一家只生产运动鞋的德国小鞋厂，到今天世界上的知名企业，PUMA走过了一条不为人知的发展道路。PUMA的业绩蒸蒸日上，产品种类也比以前丰富了不少：除了继续生产运动鞋以外，运动服、球类，以及手套、运动背包和手提包等配件也印上了PUMA的LOGO。 为了让产品重新回归 PUMA开始注重与带领潮流的产品设计家合作。1990年，有七位知名设计师与PUMA合作，2012年已经增长到50名。设计师的创意多了，设计水平自然也就高了，PUMA产品的档次和价位自然就提升起来。<img src="../../../../static/logo/u=3911653783,3853968967&fm=26&gp=0.jpg" width="280px" height="250px" class="puma_logo addimg_right slide-in ">1990年时的PUMA运动鞋一度只卖20马克，而今天一双PUMA的 球鞋可以卖到250欧元。 一款名为“THRIFT”的运动鞋，与PUMA另一款老式产品“TOP WINNER”很相似，只是设计家们以旧的衬衫、裤子、领带和钱包作为原料来生产这个系列，并称其为“有灵魂的运动鞋”。这样，一款原本平平无奇的产品经过重新包装，价值马上被提升到了另一个高度。  在销售方面，PUMA采取了限量发行策略，将PUMA产品的价值推到了另一个高度。例如：PUMA THRIFT一共就只生产了510双，自然购买者趋之若鹜。如今，PUMA的 运动鞋大都只能在一些特别的PUMA专卖店买到。这样，想将这些PUMA运动鞋弄到手，就要下一番苦功啦！凭着这种策略，PUMA的产品总能保持一种令人狂热的崇拜度。  “明星效应”是产品宣传必不可少的因素。1962年球王贝利脚穿PUMA球鞋和他的巴西队友们一起夺得了世界冠军；1985年贝克尔与他的PUMA运动鞋和网球拍一道赢得了温布顿网球赛；1986年足球明星马拉多纳穿着PUMA的“KING”球鞋，把大力神杯捧回了阿根廷；当年，女子网球霸主威廉姆斯身穿PUMA网球服驰骋在球场上；英俊潇洒的意大利国家男子足球队的运动员们，PUMA为他们量身定做了球衣；就连麦当娜在她的世界巡回演出中，也是脚踏PUMA。</p>
		  </div>
		  
		   <!-- Herschel Supply品牌部分 -->
		  <div class="vans">
			     <h1 class="logo_text_h1">Herschel Supply</h1>
				 <h2 class="logo_text_h2">品牌介绍</h2>
				 <p class="logo_text_p">来自加拿大的包袋品牌Herschel Supply一向以独特而又充满质感的设计风格为主，深受时尚爱好者们追捧。20世纪初期，木桶制造商Peter Alexander Cormack和他的妻子Annie移居加拿大，远渡大西洋移居加拿大，这对夫妻选择定居在一座如今人口只有30人的小镇，这个小镇的名字就叫Herschel，到了2009年，<img src="../../../../static/logo/008191947.png" width="150px" height="150px" class="Red_logo addimg_left slide-in ">Jamie Cormack与Lyndon Cormack两兄弟以家族世代定居的小镇为名，创立了配饰品牌Herschel Supply，以专注细节的设计精神致力于打造实用的商品，包括各类帽子、背包、电子产品包、旅行箱包等。</p>
		  </div>
	</div>
</template>

<script >
	export default {
		data() {
			return {
				  logo_all_show:false,
				  logo_all_right_p:false
			}
		},
		methods:{
             logo_all_show1(){
				  this.logo_all_show = true
			 },
		     logo_all_right_show(){	
					 this.logo_all_right_p = true	 		
			 },
			 checkOut(){
				//  获取所有的logo图片
				 const allimg = document.querySelectorAll('.slide-in');
				 allimg.forEach( (allimg) => {
					//   滑动图片显示的一半
					const slideHalf = window.innerHeight  + window.scrollY - allimg.height/2;
					// 图片底部距离文档顶部的距离
					const imgBottom = allimg.offsetTop + allimg.height;
					// 图片已经显示了一半
					const hasHalf = slideHalf > imgBottom;
					// 图片已经完全滚动出去
					const hasAllOut = window.scrollY < imgBottom;
					if(hasHalf&&hasAllOut){
					allimg.classList.add('active');
					}else{
						allimg.classList.remove('active');
					}
				 })
			 }
		},
		mounted(){
			 this.logo_all_show1();
			 this.logo_all_right_show();
			 window.addEventListener('scroll',this.checkOut);
		}
	}
</script>

<style >
    .logoInfo{
		 width: 100%;
		 height: 100%;
		 /* background: yellowgreen; */
		 display: flex;
		 justify-content: center;
		 flex-direction: column;
		 align-items: center;

	}

	.logo_all{
		
		 width: 100%;
		 height: 500px;
		 /* background: skyblue; */
		 margin-top: 30px;
		 box-sizing: border-box;
		
	}
	.logo_all img{
		padding: 100px;
		padding-right: 100px;
		
	}

	.logo_all_img{
		 width: 50%;
		 height: 100%;
		  float: left;
		 
		  
	}
	.logo_all_right{
		 width: 50%;
		 height: 100%;
		 float: left;
	}
	.logo_all_right h1{
		margin-top: 150px;
		 text-align: center;
		 color: #333;
		 font-size: 50px;
		 font-weight: bold;
		 font-family: 'SimHei'
	}
	.logo_all_right p{
		 text-align: center;
		 margin-top:40px;
	}
	.logo_all_right i{
		text-align: center;
		font-size: 80px;
		color: rgb(33, 187, 128);
	}
    

	.adidas{
		border-top: 1px solid #9e9e9e;
		 margin: 150px auto;
		 width: 80%;
		 height: 300px;
		 /* background: rebeccapurple; */
	}
    .logo_text_p{
		 text-align: center;
		 line-height: 20px;
	}

	.logo_text_h1{
		 margin-top: 30px;
		 text-align: left;
		 line-height: 20px;
		 font-size: 30px;
		 font-style: italic;
		 font-family:  'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif'
	}
    .logo_text_h2{
		margin-top: 50px;
		 text-align: left;
	}

	.logo_text_p{
		 margin-top: 20px;
		 line-height: 50px;
		 text-align: left;
	}

	.logo_text_img{
		 float: left;
		 margin-right: 20px;
	}

	.vans{
		 border-top: 1px solid #9e9e9e;
		 margin: 150px auto;
		 width: 80%;
		 height: 300px;
	}
	.vansLogo_img{
		 float: right;
	}

	.Red_cha{
		  border-top: 1px solid #9e9e9e;
		 margin: 150px auto;
		 width: 80%;
		 height: 100px;
	}
	.Red_logo{
		 float: left;
		 margin-right: 20px;
	}
	.puma_logo{
		float: right;
	}
	.puma{
		 border-top: 1px solid #9e9e9e;
		 margin: 150px auto;
		 width: 80%;
		 height: 700px;
	}
	.puma img{
		margin-left: 20px;
	}

	
   .addimg_left {
      float: left;
      margin-right: 20px;
	  transform: translateX(-30%) scale(0.95); 
    }

    .addimg_right {
      float: right;
      margin-left: 20px; 
	   transform: translateX(30%) scale(0.95);
    }




	  .slide-in {
       opacity: 0; 
       transition: all .5s; 
    }

	 .slide-in.active {
       opacity: 1; 
       transform: translateX(0%) scale(1); 
    }

	 /* .addimg_right.slide-in {
        transform: translateX(30%) scale(0.95);  
    }

    .addimg_left.slide-in {
        transform: translateX(-30%) scale(0.95);  
    } */
</style>